<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--  引入vue.js-->
    <script src="js/vue.js"></script>
<!--    引入axios.js-->
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <button @click="sendGet">发送异步请求-GET</button>

        <span>
            <b>{{user.id}} -- {{user.name}}</b>
        </span>
    </div>
</body>

<script>

    new Vue({
        el:"#app",
        //定义数据模型
        data:{
            user:{
                id:"",
                name:""
            }
        },
        //定义vue对象的行为
        methods:{
            sendGet(){
                //发送
                let that = this; //this是vue对象
                //get方式发送请求，参数通过？拼接，参数携带到后台的格式是 key=value&key2=value2
                axios.get("/user?id=1")
                    //通过回调获取结果(发送成功)
                    // .then(function (resp){
                    //     //获取后台返回的数据
                    //     let data = resp.data; //{id:1,name:"zs:1"}
                    //     function函数中，这个this指的是Window对象
                    //     that.user = data;
                    // })
                    .then(resp=>{
                        //获取后台返回的数据
                        let data = resp.data; //{id:1,name:"zs:1"}
                        //箭头函数中，这个this指的是当前的Vue对象
                        this.user = data;
                    })
                    //通过回调获取结果(发送失败)
                    .catch(function (er){
                        alert("error")
                    });
            }
        },
        //监听机制，监听指定属性的变化（一旦属性发生值的改变，我们实现写好的监听回调方法会执行）
        watch:{

        },
        //计算属性：本质还是一个属性，只不过这个属性的值需要通过业务运算获取，而且我们只需要运算一次
        computed:{

        },

        //Vue对象创建完成，但是和页面元素没有任何关系的阶段
        created(){
        },

        //Vueu对象中的数据和页面元素完成绑定完成后的阶段
        mounted(){
        }
    });

</script>

</html>